<template>
	<view class="address_content">
		<!-- #ifdef MP-WEIXIN -->
		<!-- <u-navbar :autoBack="true" :title="title"></u-navbar> -->
		<!-- #endif -->  
		<!-- #ifdef MP-ALIPAY -->  
		<!-- #endif -->
		<!-- <u-navbar :title="title" :autoBack="true"></u-navbar> -->
		<view class="list-box">
			<view class="row flex teama">
				<view class="flex">
					<text class="tit">收货人</text>
					<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
				</view>
				<text class="iconfont team" style="color:#FF4D60;"></text>
			</view>
			<view class="row flex">
				<text class="tit">手机号码</text>
				<input class="input" type="number" v-model="addressData.phone" placeholder="收货人手机号码" placeholder-class="placeholder" />
			</view>
			<view class="row flex teama">
				<view class="flex">
					<text class="tit">所在地区</text>
					<input disabled  class="input" type="text" v-model="addressData.info" placeholder="收货地址" @click="selectAddr" placeholder-class="placeholder" />
				</view>
				<text class="iconfont address" @click="selectAddr" style="color:#FF4D60;"></text>
			</view>
			<view class="row flex "> 
				<text class="tit">详细地址</text>
				<input class="input" type="text" v-model="addressData.address" placeholder="门牌号" placeholder-class="placeholder" />
			</view>
			
			<view class="row flex teama" >
				<view class="default">
					<view style="color:#313131;font-size: 26rpx;margin-bottom: 10rpx;">设为默认地址</view>
					<view style="color:#979797;font-size: 22rpx">提醒：每次下单会默认使用该地址</view>
				</view>
				<u-switch size="20" v-model="addressData.isDefault" activeColor="#FF4D60"></u-switch>
				<!-- <switch :checked="addressData.defaule" color="#FF4D60" @change="switchChange" /> -->
			</view>
			<!-- <view class="AI">
				<view class="AI_title">智能粘贴</view>
				<textarea class="textarr" cols="30" rows="3" placeholder="粘贴整段收货信息进行识别，系统会自动识别填充收货人，手机号 码，地址等信息"></textarea>
			</view> -->
		</view>
		<view class="add-btn" @tap="confirm"><text>保存并使用</text></view>
		
		<!-- 地址选择 -->
		<u-picker ref="uPicker" :show="addressShow" :columns="columns" keyName="label" @change="changeHandler" @cancel="addressShow = false"
			confirmColor="#FF4D60" :closeOnClickOverlay="true" @close="addressShow = false" @confirm="selectAddress"></u-picker>
	</view>
</template>

<script>
	import { addAddress,getAddressInfo,editAddress,getAreaList } from '@/common/http/api.js'
	export default {
		data() {
			return {
				topbar:50,
				// addressData: {
				// 	name: "",
				// 	phone: "",
				// 	country: "中国",
				// 	info:'陕西省 西安市 雁塔区'
				// 	province: "",
				// 	city: "",
				// 	district: "",
				// 	address: "",
				// 	isDefault: 0
				// },
				addressData: {
					id:'',
					memberId: '',
					name: "",
					phone: "",
					country: "中国",
					info:'',
					address: "",
					isDefault: false
				},
				addressShow:false,
				title: '',
				columns: []
			}
		},
		onLoad(option){
			this.topbar=getApp().globalData.customBar;
			if(option.type == 0){
				this.title = '新增地址'
				this.addressData = {
					id: '',
					memberId: '',
					name: '',
					phone: '',
					country: '',
					info:'',
					address: '',
					isDefault: false
				}
			}else{
				this.title = '编辑地址'
				getAddressInfo(option.id).then(res => {
					this.addressData = {
						id:res.data.id,
						memberId: res.data.memberId,
						name: res.data.name,
						phone: res.data.phone,
						country: res.data.country,
						info:`${res.data.province} ${res.data.city} ${res.data.district}`,
						address: res.data.address,
						isDefault: res.data.tolerant == 0 ? false : true
					}
				})
			}
		},
		methods: {
			selectAddress(e){
				this.addressData.info = e.value.join(' ')
				this.addressShow = false;
				// console.log(this.addressData.info ,'xxxxxxxxxxxxxxxxxxaasaasasaaa')
			},
			changeHandler(e) {
			     const {
			        columnIndex,
			        index,
					value,
					values,
			        picker = this.$refs.uPicker
			    } = e
				console.log(columnIndex,'columnIndex')
				console.log(index,'index')
				console.log(value,'value')
				console.log(values,'values')
				// 微信小程序无法将picker实例传出来，只能通过ref操作
			    if (columnIndex === 0) {
					// 拿到Index对象的值
					getAreaList({provincialName:value[0]}).then(res => {
						// this.columns = res.data;
						picker.setColumnValues(1, res.data[1])
						picker.setColumnValues(2, res.data[2])
					})
			    }else if(columnIndex == 1){
					getAreaList({provincialName:value[0],cityName:value[1]}).then(res => {
						picker.setColumnValues(2, res.data[2])
					})
				}
			},
			
			//地图选择地址
			// chooseLocation(){
			// 	uni.chooseLocation({
			// 		success: (data)=> {
			// 			this.addressData.addressName = data.name;
			// 			this.addressData.address = data.name;
			// 		}
			// 	})
			// },
			selectAddr(){
				this.addressShow = true;
				getAreaList().then(res => {
					console.log(res,'xxxxxxxxxxxxxxxxx')
					this.columns = res.data;
				})
			},
			//提交
			confirm(){
				if(!this.addressData.name){
					this.$ut.msg('请填写收货人姓名');
					return;
				}
				if(!this.$ut.checkPhone(this.addressData.phone)){
					this.$ut.msg('请输入正确的手机号码');
					return;
				}
				if(!this.addressData.info){
					this.$ut.msg('请选择正确地址');
					return;
				}
				if(!this.addressData.address){
					this.$ut.msg('请填写门牌号信息');
					return;
				}
				if(this.title == '新增地址'){
					const obj = {
						name: this.addressData.name,
						phone: this.addressData.phone,
						tolerant: this.addressData.isDefault == false ? 0 : 1,
						country: "中国",
						province: this.addressData.info.split(' ')[0],
						city: this.addressData.info.split(' ')[1],
						district: this.addressData.info.split(' ')[2],
						address: this.addressData.address,
					}
					addAddress(obj).then(res => {
						this.$ut.msg('新增成功');
						setTimeout(function() {uni.navigateBack()}, 1000);
						
					})
				}else{
					const obj = {
						id:this.addressData.id,
						memberId:this.addressData.memberId,
						name: this.addressData.name,
						phone: this.addressData.phone,
						tolerant: this.addressData.isDefault == false ? 0 : 1,
						country: "中国",
						province: this.addressData.info.split(' ')[0],
						city: this.addressData.info.split(' ')[1],
						district: this.addressData.info.split(' ')[2],
						address: this.addressData.address,
					}
					editAddress(obj).then(res => {
						this.$ut.msg("编辑成功")
						setTimeout(function() {uni.navigateBack()}, 1000);
					})
				}
				
				// console.log(obj,'xxxxxxxxxxxxxxxxx')
				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				// this.$api.prePage().refreshList(data, this.manageType);
				// this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
				// setTimeout(()=>{
				// 	uni.navigateBack()
				// }, 800)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address_content{
		width: 100vw;
		min-height: 100vh;
		background-color: #fff;
		
		.list-box{
			padding: 24rpx;
			
			.row{
				margin-bottom: 32rpx;
				justify-content: flex-start;
				
				.tit{
					width: 130rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #979797;
					line-height: 34rpx;
					margin-right: 70rpx;
				}
				
				input{
					height: 50rpx;
					padding: 10rpx;
					font-size:26rpx;
				}
				
				.placeholder{
					color: #CBCBCB;
					font-size: 26rpx;
				}
			}
		}
		
		.AI{
			margin-top: 64rpx;
			
			.textarr{
				width: 100%;
				height: 120rpx;
				padding: 24rpx;
				background-color: rgba(246,246,246,0.59);
				margin-top: 24rpx;
				font-size: 22rpx;
				line-height: 1.5;
			}
		}
	}
	.add-btn{
		width: 75%;
		padding: 16rpx 0;
		text-align: center;
		overflow: hidden;
		bottom: 15px;
		font-size: 16px;
		// font-weight: bold;
		color: #fff;
		background: #FF4D60;
		border-radius: 40rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		margin-top: 633rpx;
	}
	.teama{
		justify-content: space-between !important;
	}
</style>
